import ReactEcharts from 'echarts-for-react';
import { Card, Row } from 'antd';
import * as echarts from 'echarts';
import https from "../service/http";
import { React, useState, useEffect } from 'react';

const HomePage = (props) => {
    // 配置对象
    var [evaluate, setEvaluate] = useState([]);
    // var num = [];
    useEffect(() => {
        var notice, Notice, activity, Homeland, pay, Course, task, vacation, Photo, Appraisal, vote, remind;
        https('Notice_list/getAll', "get", res => {
            notice = res.data.length;
        });
        https('Notice_list/getAll', "get", res => {
            Notice = res.data.length;
        });
        https('Appraisal_list/getAll', "get", res => {
            activity = res.data.length;
        });
        https('Appraisal_list/getAll', "get", res => {
            Homeland = res.data.length;
        });
        https('Appraisal_list/getAll', "get", res => {
            pay = res.data.length;
        });
        https('Appraisal_list/getAll', "get", res => {
            Course = res.data.length;
        });
        https('Appraisal_list/getAll', "get", res => {
            task = res.data.length;
        });
        https('Health/getAll', "get", res => {
            Appraisal = res.data.length;
        });
        https('Student_vacation/getAll', "get", res => {
            vacation = res.data.length
        });
        https('Photo/getAll', "get", res => {
            Photo = res.data.length
        });
        https('Vote/getAll', "get", res => {
            vote = res.data.length;
        });
        https('Appraisal_list/getAll', "get", res => {
            remind = res.data.length;
            setEvaluate([notice, Notice, 15, 20, 44, 27, 66, vacation, Photo, Appraisal, vote, remind]);
        });
    }, []);
    useEffect(() => { },
        [evaluate]);

    const getOption = (sal, sto) => {
        return {
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: [
                        '通知', '公告', '活动', '家园任务', '缴费通知', '选课通知', '作业', '请假', '发布相册', '评价', '投票', '带药提醒'
                    ],
                }
            ],
            series: [
                {
                    data: evaluate,
                    type: 'bar',
                    barWidth: '23%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0.5, 0.5, 1,
                            [
                                { offset: 0, color: 'rgb(30,198,150)' },
                                { offset: 0.5, color: 'rgb(28,196,161)' },
                                { offset: 1, color: 'rgb(72,207,190)' }
                            ]
                        )
                    },
                }
            ],
            yAxis: {
                min: 0,  //取0为最小刻度
                max: 100, //取100为最大刻
                scale: true, //自适应
                minInterval: 25, //分割刻度
                splitLine: { //多条横线
                    lineStyle: {
                        type: 'dashed' //设置网格线类型 dotted ：虚线 solid :实线
                    },
                    show: true
                },
                axisTick: { //y轴刻度线
                    show: true
                },
                axisLine: { //y轴
                    show: true
                },
            },
            grid: {
                left: '3%',
                right: '0%',
                bottom: '18%',
                top: '15%'
            },
        };
    };
    return (
        <div>
            <Card className="shadowBox">
                <div className='title'>消息发布数量统计</div>
                <div className='time'>
                    <div>2022年8月 | 前10 </div>
                </div>
                <div className='more'><a href='/message/MessageList'>查看更多 &gt;</a></div>
                <div><ReactEcharts option={getOption(getOption)} /></div>
            </Card>
        </div>
    )
}

export default HomePage

